import React, {useEffect, useState} from "react";
import {createStyles} from "antd-style";
import LoginForm from "@/pages/LoginPage/LoginForm.tsx";
import {Button} from "antd";
import UserApi, {UserDto} from "@/api/web/UserApi.ts";
import {useNavigate} from "react-router";
import Background from "@/components/Background";

const useStyles = createStyles(({css, token}) => {

    return {
        container: css`
            width: 100vw;
            height: 100vh;
            overflow: clip;
            position: relative;
        `,
        centerFormContainer: css`
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            padding: 30px;
            border-radius: 30px;
            background-color: ${token.colorBgContainer + "a0"};
            width: 400px;
            
            .header {
                display: flex;
                align-items: center;
                gap: 30px;
            }
        `,
    }
})

const LoginPage: React.FC = () => {
    const {styles} = useStyles()
    const [userDto, setUserDto] = useState<UserDto | null>(null)
    const navigate = useNavigate();

    useEffect(() => {
        UserApi.getSelf().then(res => {
            if (res.data != null) {
                setUserDto(res.data)
            }
        })
    }, []);

    return (
        <div className={styles.container}>
            <Background/>
            <div className={styles.centerFormContainer}>
                <div className="header">
                    <p>{
                        userDto && userDto.username ? "欢迎" + userDto.username
                            : "请登录"
                    }</p>
                    {
                        userDto &&
                        <Button
                            onClick={() => {
                                navigate("/home")
                            }}
                        >
                            进入
                        </Button>
                    }
                </div>
                <LoginForm/>
            </div>
        </div>
    )
}

export default LoginPage
